<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>扫码购买</title>
</head>
<body>

    <div style="width: 400px;height: 400px;position: absolute;margin: auto;top: 0px;left: 0px;right: 0px;bottom: 0px;">
        <div style="font-weight: 700;font-size: 20px;text-align: center;margin-bottom: 10px;">
            订单号：<span id="orderNumber" th:text="*{orderNumber}"></span>
        </div>
        <img id="flushQRCode" th:src="'data:image/png;base64,'+*{QRCode}" width="360px" height="360px" style="cursor: pointer;display: inline-block" >
        <div style="font-weight: 700;font-size: 20px;text-align: center;margin-top: 10px">
            扫码支付<br>
            过时时间：<span id="expiration_time"></span>
        </div>
    </div>
    <div id="flushDiv" style="width: 140px;height:80px;display: none;position: absolute;margin: auto;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 999">
        <p style="font-size: 15px;font-weight: 900;font-family: 'JetBrains Mono ExtraBold'">二维码已经失效</p>
        <button id="flush" style="color: white;background-color: rgb(255,97,0);width: 120px;height: 35px">请点击刷新</button>
    </div>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
    <script>
        //过期时间，显示
        let expiration_time=document.getElementById("expiration_time");
        let beginTiming=new Date().getTime()+61000;
        //订单号
        let orderNumber=document.getElementById("orderNumber");
        //二维码
        let flushQRCode=document.getElementById("flushQRCode");
        let flush=document.getElementById("flush");
        let flushDiv=document.getElementById("flushDiv");
        function showTime(){
            var nowTime=new Date().getTime();
            var timeInterval = new Date(beginTiming-nowTime);
            if(beginTiming-nowTime<=0){
                clearInterval(interval);
                expiration_time.innerHTML="已经过时，请刷新二维码";
                flushQRCode.style.opacity=0.3;
                flushDiv.style.display="inline-block";
            }else{
                expiration_time.innerHTML=timeInterval.getMinutes()+":"+timeInterval.getSeconds();
            }
        }
        var interval = setInterval(showTime,1000);
        //刷新二维码
        $("#flush").bind("click",function (){
            $.ajax({
                url:"/flush",
                type:"post",
                //post请求体
                data:orderNumber.innerText,
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                success:function (responseText){
                    console.log("success");
                    flushQRCode.src="data:image/png;base64,"+responseText;
                    beginTiming=new Date().getTime()+61000;
                    flushQRCode.style.opacity=1;
                    flushDiv.style.display="none";
                    interval = setInterval(showTime,1000);
                },
                error:function (e){
                    console.log(e);
                    console.log("error");
                }
            });
        })
        //下单成功返回
        $.ajax({
            url:"/success",
            type:"post",
            //post请求体
            data:orderNumber.innerText,
            dataType:"json",
            contentType:"application/json;charset=utf-8",
            success:function (responseText){
                console.log("success");
                document.body.innerHTML="";
                window.alert("购买成功！")
            },
            error:function (e){
                console.log(e);
                console.log("购买失败");
            }
        });
    </script>
</body>
</html>